body{
    background-color: rgb(0, 0, 0);
    text-align: center;
    border-style: double;
    border-color: white;
    border-width: 20px;
    
}


h1{
    color: white;
}
p{
    background-color: white;
    border: 6px solid rgb(123, 0, 255);
    box-shadow: 0 0 8px rgb(123, 0, 255), 0 0 8px rgb(123, 0, 255) inset;
}
 button{
    background-color: gray;
 }

img{
    border: 6px solid rgb(123, 0, 255);
    box-shadow: 0 0 8px rgb(123, 0, 255), 0 0 8px rgb(123, 0, 255) inset;
    background: white;
    transition-duration: 1000ms;
    transition-timing-function: cubic-bezier(0.92, 0.06, 0.45, 0.97) ease-in;
    transition-delay: 1000ms;
    transition: 1s ease-in, 1000ms transform ease-in-out 1000ms;
    text-align: left;
    transform: rotateX('1s');
     background: transparent;
    transform: translate(30px);

    animation-duration: 3s;
    animation-name: spin;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
@keyframes spin{
    0%{
    

    }
    
    50%{

        scale: 2;
        transform: rotate(0);
        border-radius: 0;
    }

    100%{
        transform: rotateY(360deg);
        border-radius: 50%;
       
    }
}
.loading{
    background-color: rgb(0, 0, 0);
    width: 1800px;
    border: 6px solid rgb(123, 0, 255);
    border-radius: 4px;
    box-shadow: 0 0 8px rgb(123, 0, 255), 0 0 8px rgb(123, 0, 255) inset;
    position: absolute;
    top: 5%;
    left: 50%;
    translate: -50% -50%;
    z-index: 10;
    animation: 7s loading ease-in-out;
    align-self: center;
    animation-fill-mode: forwards;

}
@keyframes loading{
    0%{
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    33%{
        transform: rotateX(180deg) rotateY(0) rotateZ(0);
    }
    67%{
        transform: rotateX(180deg) rotateY(180deg) rotateZ(0);

    }
    100%{
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}